<template>
    <el-menu    
      class="el-menu-vertical-demo"
      :collapse="isCollapse"    
      router
      :default-active="activeKey"
    >     
      <el-menu-item v-for="item in menus" :key="item.path" :index="item.path">     
        <el-icon><component :is="item.meta.iconCom"></component></el-icon>  
        <template #title>{{item.meta.title}}</template>
      </el-menu-item>
    </el-menu>  
</template>

<script lang="ts" setup>
    import {useStore} from 'vuex'
    import { ref,defineProps, watch } from 'vue'
    import { useRoute, useRouter } from 'vue-router';
    // const activeTextColor = ref('')
    // let isCollapse = ref(false)
    const router = useRouter()
    const route = useRoute()
    const store = useStore()  
    let activeKey = ref(router.currentRoute.value.fullPath)  
    let isCollapse:boolean =  ref(store.state.isCollapse)
    defineExpose({
      isCollapse
    })
    // const  props = defineProps(['menus'])   

    defineProps({
      menus:{
        type: Object,
        default: () => ({}),
      }
    })

    //监听路由变化，从而切换菜单栏
    watch(()=>route.path,()=>{
      // activeKey = ref(router)
      activeKey.value = route.path
    })

    
    // defineProps({
    //   menus: {
    //     type: reactive,
    //     default: reactive({})
    //   }
    // }) 
    // console.log('menus',props.menus)
</script>

<style lang="scss" scoped>
.el-menu{
    border: none;
    .el-menu-item{
      height: 44px;
    }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>
